<template>
  <div class="app-container ohn transaction-box">
    <QuotationCreate v-show="testTrade.status == 'testTradeCreated'" />
    <DetectionCreate v-show="testTrade.status == 'createdDetection'" />
    <ApplyCreate v-show="testTrade.status == 'testQuotationConfirmed'" />
    <WorksheetCreate
      v-show="testTrade.status == 'testApplicationFormConfirmed'"
    />
    <ReportCreate v-show="testTrade.status == 'testWorkOrderConfirmed'" />
  </div>
</template>
<script>
import QuotationCreate from "./quotationCreate.vue";
import DetectionCreate from "./detectionCreate.vue";
import ApplyCreate from "./applyCreate.vue";
import WorksheetCreate from "./worksheetCreate.vue";
import ReportCreate from "./reportCreate.vue";
export default {
  components: {
    QuotationCreate,
    DetectionCreate,
    ApplyCreate,
    WorksheetCreate,
    ReportCreate,
  },
  data() {
    return {
      testTrade: {
        name: "",
        id: "",
        status: "",
      },
    };
  },
  created() {
    this.testTrade.name = this.$route.query.name;
    this.testTrade.id = this.$route.query.id;
    this.testTrade.status = this.$route.query.status;
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.transaction-box {
  .el-form .el-form-item__label {
    background-color: red;
    line-height: 20px !important;
  }
  .el-form-item--medium .el-form-item__label {
    line-height: 20px !important;
  }
}
</style>
